/**
 * Created by oiuyt on 2018/7/18.
 */
import React, { Component } from 'react';
import { Layout,  Icon,Avatar ,Menu, Dropdown} from 'antd';
import SiderMenu  from './SiderMenu.jsx';
import MainContent  from './MainContent.jsx';
import { withRouter } from 'react-router'
const { Header } = Layout;
const WithRouterSiderMenu = withRouter(SiderMenu);//也可以用es6的语法@
const WithRouterMainContent = withRouter(MainContent);//也可以用es6的语法@



class HomeLayout extends Component {
        constructor(props) {
                super(props);
                console.log(props)
        }
        state = {
                collapsed: false,
        };

        toggle = () => {
                this.setState({
                        collapsed: !this.state.collapsed,
                });
        }
        handleMenuClick = (e) => {
               console.log(e)
        }


        render() {
                const menu = (
                    <Menu  onClick={this.handleMenuClick}>
                            <Menu.Item key="1">
                                    基本资料
                            </Menu.Item>
                            <Menu.Item key="2">
                                    修改密码
                            </Menu.Item>
                            <Menu.Divider/>
                            <Menu.Item key="3" >
                                    退出系统
                            </Menu.Item>
                    </Menu>
                );

                return (
                    <Layout id="homeLayout">
                            <WithRouterSiderMenu collapsed={this.state.collapsed} />
                            <Layout style={{marginLeft: (this.state.collapsed)?"80px" : "200px"}}>
                                    <Header style={{ background: '#fff', padding: 0 }}>
                                            <span style={{float:'right',marginRight:'10px'}}>
                                                 <Avatar style={{ backgroundColor: '#87d068',marginRight:"10px" }} icon="user"  />
                                                    <Dropdown overlay={menu}>
                                                            <a className="ant-dropdown-link" href="javascript:void(0)">
                                                                    zzmlove2006 <Icon type="down" />
                                                            </a>
                                                    </Dropdown>
                                            </span>

                                            <Icon
                                                className="trigger"
                                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                                onClick={this.toggle}
                                            />

                                    </Header>
                                    <WithRouterMainContent/>
                            </Layout>
                    </Layout>
                );
        }
}
export default HomeLayout